<template>
  <!-- 商品列表 -->
    <el-dialog
      title="商品列表"
      :visible.sync="productListTemplateVisible"
      width="60%"
      :close-on-click-modal="false"
      :show-close="false">
      <el-form :inline="true" class="demo-form-inline2" size="small" v-model="productForm">
          <el-row>
              <el-form-item label="商品名称">
                  <el-input v-model="productForm.chineseName" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item label="商品编码">
                  <el-input v-model="productForm.code" placeholder="商品编码"></el-input>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="queryPageProductManagement">搜索</el-button>
                  <el-button @click="close" size="mini">取消</el-button>
                  <el-button type="primary" @click="saveModuleConf" size="mini">确定</el-button>
              </el-form-item>
          </el-row>
      </el-form>
      <div class="table-section">
          <el-table :data="productListData"
              v-loading="productListloading"
              :header-cell-style="tableHeaderColor"
              ref="multipleTable"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              border
              size="small"
              @selection-change="selectAddProductChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column prop="id" label="ID" sortable  align="center"></el-table-column>
              <el-table-column prop="code" label="商品编码" sortable  align="center"></el-table-column>
              <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="name" label="商品品牌" align="center"></el-table-column>
              <el-table-column prop="fullNamePath" label="商品类目" align="center"></el-table-column>
              <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center"></el-table-column>
          </el-table>
      </div>
      <div v-if="productListData.length > 0" style="position: absolute;right: 20px;bottom: 18px;width: 100%;text-align: right;">
          <el-pagination
              @size-change="producthandleSizeChange"
              @current-change="producthandleCurrentChange"
              :current-page="productForm.start"
              :page-sizes="[5]"
              :page-size="productForm.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="productListTotal">
          </el-pagination>
      </div>
    </el-dialog>
</template>

<script>
export default {
    props:{
      moduleId:{
          type: String
      },
      type:{
        type:Number,
        default:0,
      },
      productListTemplateVisible:{
          type: Boolean
      }
    },
    data(){
        return{
            productListloading: false,           //弹窗商品表格加载状态
            productListData:[],                 //商品列表
            productForm:{},                     //商品搜索条件
            productSelectList:[],               //选中的商品
            productListTotal:0,                 //弹窗商品总条数
        }
    },
    methods:{
        close(){
            this.$emit('productListTemplateVisibleFun')
        },
        queryPageProductManagement(){
            let that = this;
            this.productListloading = true;
            this.utils.request.queryShopApi(this.productForm,res=>{
                console.log(res);
                that.productListloading = false;
                if(res.code == '0000'){
                    that.productListData = res.data.rows;
                    that.productListTotal = res.data.total;
                }
            })
        },
        /**
         * 换页刷新
         */
        producthandleCurrentChange(val){
            console.log(val);
            this.$set(this.productForm,"start",val);
            //查询商品
            this.queryPageProductManagement();
        },
        /**
         * 商品换页刷新
         */
        producthandleSizeChange(val){
            console.log(val);
        },
        /**
         * 商品选中
         */
        selectAddProductChange(val){
            this.productSelectList = val;
        },
        //table的双色条纹
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        //修改table header的背景色
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color:rgb(250,250,250);'
            }
        },
        /**
         * 保存配置
         */
        saveModuleConf(){
            if(this.productSelectList.length < 1){
                this.$message({message:"必须选中一条商品",type:"error"})
                return false;
            }
            let productIds = this.productSelectList.map(item=>item.id);
            this.utils.request.cmsPageModuleAddModuleData({templateDataType:1,moduleId:this.moduleId,type:this.type,productIds:productIds},res=>{
                if(res.code == "0000"){
                // this.productListDialogVisible = false;
                this.$emit('productListTemplateVisibleFun');
                this.$emit('getModuleProductList',{moduleId:this.moduleId,type:this.type});
                this.productSelectList = [];
                this.$message({"message":"保存成功",type:"success"});
                }else{
                this.$message({"message":res.msg,type:"error"});
                }
            })
        },
    },
    mounted(){
        this.queryPageProductManagement();
    }
}
</script>

<style>

</style>
